import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';

import {HeroService} from '../hero-detail/hero.service';
import {Hero} from '../hero-detail/hero';


@Component({
  selector: 'app-my-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit{

  heroes: Hero[];
  selectedHero: Hero;

  constructor(
    private heroService: HeroService,
    private router: Router
  ){}

  ngOnInit(): void {
    this.getHeroes();
  }

  gotoDetail(): void{
    this.router.navigate(['/detail', this.selectedHero.id])
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

  getHeroes(): void{
    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
  }
}
